<template name="shopItem">
	<view class="shopBox" @longpress="disCollection"  @tap="toPage" data-url="shopDetail" :data-id="shopInfo.linkId" >
		<image :src="shopInfo.img"></image>
		<view class="shopInfo">
			<view class="nameAndjl">
				<text class="shopName">{{shopInfo.name}}</text>
				<text class="juli">{{dis}}</text>
			</view>
			<view class="pfBox">
				<sx-rate :value="shopInfo.score==0.0?5:shopInfo.score" :disabled="true" />
			</view>
			<text class="address">{{shopInfo.address}}</text>
		</view>
	</view>
</template>

<script>
	import sxRate from "@/components/sx-rate/index.vue";
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	import API from "@/common/api.js";
	export default{	
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				roads:state=>state.map.roads,
				userInfo: state => state.user.userInfo
			})
		},
		components:{
			sxRate
		},
		name:'shopItem',		//组件名称
		// 传递参数
		props:{
			shopInfo:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				dis: '0米',
				soldCount:0
			}
		},
		// 组件方法
		methods:{
			apiGetDis(){
				let _now=this.roads.longitude+','+this.roads.latitude;
				let _to=this.shopInfo.longi+','+this.shopInfo.lati;
				API.getDistance(_now,_to)
				.then(res=>{
					this.dis=res;
				})
			},
			disCollection(){
				this.$store.dispatch("apiFollowShop",{
					userId:this.userInfo.userId,
					linkId:this.shopInfo.linkId
				}).then(res=>{
					if(res.data.code==1){
						uni.showToast({
							title: '已取消关注',
							icon: 'none'
						});
						uni.$emit("sxGuanzhu")
					}
				})
			}
		},
		created() {
			setTimeout(()=>{
				this.apiGetDis()
			},200)
		}
	}
</script>

<style lang="less" scoped>
	.shopBox{
		display: flex;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 24upx;
		margin-bottom: 16upx;
		image{
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
			margin-right: 16upx;
			flex-shrink: 0;
		}
		.shopInfo{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.nameAndjl{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.shopName{
					font-size: 32upx;
					color: #202932;
				}
				.juli{
					font-size: 28upx;
					color: #878787;
				}
			}
			.address{
				font-size: 32upx;
				color: #202932;
			}
		}
	}
</style>
